<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
<style>
    #userIndex {
        color: #444;
        background: #fff;
    }

    .custom-header {
        padding: 0 20px;
        margin-bottom: 10px;
    }

    .color-7536D0 {
        color: #7536D0;
        cursor: pointer;
    }

    .common-btn {
        height: 32px;
        cursor: pointer;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

    .el-input__inner,
    .el-input__icon {
        line-height: 32px;
        height: 32px;
    }

    .btn-box {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        justify-content: space-between;
    }

    .refresh-btn {
        width: 32px;
        border: 1px solid #E6E6E6;
        font-size: 14px;
        margin-right: 20px;
    }

    .create-goods,
    .add-params,
    .add-level1-sku {
        width: 98px;
        background: #7536D0;
        color: #fff;
    }

    .create-goods {
        margin-right: 40px;
    }

    .create-goods span,
    .add-params span,
    .add-level1-sku span {
        margin-left: 8px;
    }

    .platform-name span {
        display: flex;
    }

    .goods-img {
        width: 34px;
        height: 34px;
        margin-right: 10px;
        border: 1px solid #e6e6e6;
    }

    .display-flex {
        display: flex;
        align-items: center;
    }


    .label-auto {
        width: 100%;
        height: 100%;
    }

    .one-ellipsis {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .sort-order {
        margin-left: 6px;
        color: #C0C4CC;
        flex-direction: row-reverse;
    }

    .recycle-btn {
        width: 88px;
        color: #444;
        border: #444 1px solid;
    }

    .recycle-btn i {
        margin-right: 6px;
        font-size: 14px;
    }

    .status-box {
        width: 100%;
        justify-content: space-between;
    }

    .status-btn {
        width: 56px;
        height: 26px;
        border: 1px solid #7438D5;
        color: #7438D5;
        font-size: 12px;
    }

    .status-btn-2 {
        color: #FF5959;
        border-color: #FF5959;
    }

    .status-btn-3 {
        color: #999;
        border-color: #999;
    }

    .icon-top {
        margin-left: -5px;
    }

    .edit-text,
    .del-text,
    .enable-text,
    .disable-text {
        cursor: pointer;
        color: #444;
        margin-right: 14px;
    }

    .edit-text {
        color: #7438D5;
    }

    .enable-text {
        color: #01CFA1;
    }

    .del-text {
        color: #FF5959;
    }

    .el-popover {
        left: 46px;
        top: 10px;
        padding: 16px;
    }

    .choose-container {
        margin-bottom: 10px;
        color: #666;
    }

    .custom-choose,
    .custom-choose-type,
    .custom-choose-sub {
        height: 50px;
        border-radius: 4px;
        justify-content: space-between;
        padding: 0 20px;
        background: #fff;
    }

    .custom-choose-type,
    .custom-choose-sub {
        justify-content: flex-start;
    }

    .custom-choose-sub {
        height: 70px;
        padding: 0 10px 20px 20px;
    }

    .choose-status-tip {
        margin-right: 12px;
    }

    .custom-choose-type-tip {
        margin-right: 16px;
    }

    .choose-btn {
        width: 80px;
        border: 1px solid #E6E6E6;
        margin-right: 10px;
        height: 30px;
    }

    .choose-btn-active {
        background-color: #7536D0;
        border: none;
        color: #fff;
    }

    .custom-table {
        /* padding: 20px 20px 30px; */
        padding: 0px 20px 30px;
        background: #fff;
    }

    label {
        margin-bottom: 0;
    }

    .page-container {
        justify-content: flex-end;
        margin-top: 30px;
    }

    .goods-title {
        margin-bottom: 4px;
        width: 154px;
        line-height: 14px;
    }

    .activity-type {
        justify-content: space-around;
    }

    .activity-type-btn {
        width: 40px;
        height: 20px;
        padding-top: 2px;
        border-radius: 4px;
        color: #fff;
        justify-content: center;
    }

    .groupon-btn {
        background: #A17BDF;
    }

    .seckill-btn {
        background: #FE9387;
    }

    .score-btn {
        background: #FBB74A;
    }

    .el-table .bg-color {
        background: #f9f9f9;
    }

    .cell-left .cell {
        justify-content: flex-start !important;
    }

    .el-table_1_column_11.is-leaf,
    .el-table_1_column_11 {
        border-color: #EBEEF5 !important;
    }

    .avatar-img {
        width: 26px;
        height: 26px;
        border: 1px solid #E5E5E5;
    }

    .el-popover {
        padding-bottom: 6px;
        color: #444;
    }

    .popover-container>div {
        margin-bottom: 10px;
    }

    .popover-tip {
        width: 56px;
        color: #666;
        text-align: justify;
        text-align-last: justify;
    }

    .custom-table {
        padding-top: 14px;
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/Sortable.min.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/vuedraggable.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
<div id="userIndex" v-cloak>
    <div class="custom-header display-flex">
        <div class="choose-status" style="font-size: 14px;">
            用户列表
        </div>
        <div class="custom-search">
            <el-input placeholder="请输入搜索内容" suffix-icon="el-icon-search" v-model="searchKey">
            </el-input>
        </div>
    </div>
    <div class="display-flex-b" style="padding: 0 20px;">
        <div class="custom-refresh display-flex-c" @click="getData">
            <i class="el-icon-refresh"></i>
        </div>
    </div>
    <!-- <div class="choose-container">
        <div class="custom-choose display-flex">
            <div class="choose-status">
                <span class="choose-status-tip">筛选条件</span>
                <el-switch @change="isShoose" active-value="1" inactive-value="0" v-model="chooseType"
                    active-color="#7536D0" inactive-color="#E9EBEF">
                </el-switch>
            </div>
            <div class="custom-search">
                <el-input placeholder="请输入搜索关键词" suffix-icon="el-icon-search" v-model="searchKey">
                </el-input>
            </div>
        </div>
        <div v-if="chooseType==1">
            <div class="custom-choose-type display-flex">
                <div class="custom-choose-type-tip">
                    渠道来源
                </div>
                <div class="common-btn choose-btn" :class="platformType=='all'?'choose-btn-active':''"
                    @click="operation('platform','all')">
                    全部
                </div>
                <div class="common-btn choose-btn" :class="platformType=='wxMiniProgram'?'choose-btn-active':''"
                    @click="operation('platform','wxMiniProgram')">
                    小程序
                </div>
                <div class="common-btn choose-btn" :class="platformType=='wxOfficialAccount'?'choose-btn-active':''"
                    @click="operation('platform','wxOfficialAccount')">
                    公众号
                </div>
                <div class="common-btn choose-btn" :class="platformType=='H5'?'choose-btn-active':''"
                    @click="operation('platform','H5')">
                    H5
                </div>
                <div class="common-btn choose-btn" :class="platformType=='App'?'choose-btn-active':''"
                    @click="operation('platform','App')">
                    App
                </div>
            </div>
            <div class="custom-choose-type display-flex">
                <div class="custom-choose-type-tip">
                    角色分组
                </div>
                <div class="common-btn choose-btn" :class="roleType=='all'?'choose-btn-active':''"
                    @click="operation('role','all')">
                    全部
                </div>
                <div class="common-btn choose-btn" :class="roleType=='default'?'choose-btn-active':''"
                    @click="operation('role','default')">
                    默认分组
                </div>
                <div class="common-btn choose-btn" :class="roleType=='test'?'choose-btn-active':''"
                    @click="operation('role','test')">
                    测试会员
                </div>
            </div>
            <div class="custom-choose-type display-flex">
                <div class="custom-choose-type-tip">
                    加入时间
                </div>
                <div>
                    <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" v-model="joinTime"
                        type="datetime" placeholder="选择日期时间">
                    </el-date-picker>
                </div>
            </div>
            <div class="custom-choose-sub display-flex">
                <div class="common-btn choose-btn choose-btn-active" style="margin-right: 20px;"
                    @click="operation('filter')">
                    筛选
                </div>
                <div class="common-btn choose-btn" @click="operation('clear')">
                    清空
                </div>
            </div>
        </div>
    </div> -->
    <div class="custom-table">
        <div class="custom-table-border">
            <el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" border
                :row-class-name="tableRowClassName" :cell-class-name="tableCellClassName"
                :header-cell-class-name="tableCellClassName" @row-dblclick="operation">
                <el-table-column label="ID" prop="id" min-width="60">
                </el-table-column>
                <el-table-column label="头像" min-width="60">
                    <template slot-scope="scope">
                        <div>
                            <img class="avatar-img" v-if="scope.row.avatar"
                                :src="Fast.api.cdnurl(scope.row.avatar)">
                                <span v-if="!scope.row.avatar">-</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="昵称" min-width="120">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">{{scope.row.nickname}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="手机号" min-width="110">
                    <template slot-scope="scope">
                        <div><span v-if="scope.row.mobile">{{scope.row.mobile}}</span><span v-else>-</span></div>
                    </template>
                </el-table-column>
                <!--
                <el-table-column label="用户角色" min-width="100">
                    <template slot-scope="scope">
                        <div class="display-flex-c">
                            <span v-if="scope.row.group.name">{{scope.row.group.name}}</span>
                            <span v-else>-</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="邀请人" min-width="120">
                    <template slot-scope="scope">
                        <div class="ellipsis-item" slot="reference">{{scope.row.nickname}}
                    </template>
                </el-table-column>
                <el-table-column label="第三方账号" prop="id" min-width="140">
                    <template slot-scope="scope">
                        <div class="platform-name display-flex-c">
                            <template v-if="scope.row.third_platform.length>0">
                                <el-popover placement="bottom" trigger="hover"
                                    :title="operation('platformname',i.platform)" width="360"
                                    v-for="(i,index) in scope.row.third_platform">
                                    <div class="popover-container">
                                        <div class="display-flex">
                                            <div class="display-flex"><div class="popover-tip">头像</div>：</div>
                                            <img class="avatar-img"
                                :src="Fast.api.cdnurl(i.headimgurl)">
                                        </div>
                                        <div class="display-flex">
                                            <div class="display-flex"><div class="popover-tip">性别</div>：</div>
                                            <div class="color-7536D0">{{i.sex==2?'女':'男'}}</div>
                                        </div>
                                        <div class="display-flex">
                                            <div class="display-flex"><div class="popover-tip">国家</div>：</div>
                                            <div class="color-7536D0">{{i.country}}</div>
                                        </div>
                                        <div class="display-flex">
                                            <div class="display-flex"><div class="popover-tip">省市</div>：</div>
                                            <div class="color-7536D0">{{i.province}}-{{i.city}}</div>
                                        </div>
                                        <div class="display-flex">
                                            <div class="display-flex"><div class="popover-tip">OpenId</div>：</div>
                                            <div class="color-7536D0">{{i.openid}}</div>
                                        </div>
                                        <div class="display-flex">
                                            <div class="display-flex"><div class="popover-tip">UnionId</div>：</div>
                                            <div class="color-7536D0">{{i.unionid}}</div>
                                        </div>
                                        <div class="display-flex">
                                            <div class="display-flex"><div class="popover-tip">创建时间</div>：</div>
                                            <div class="color-7536D0">
                                                {{moment(i.createtime*1000).format("YYYY-MM-DD HH:mm:ss")}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ellipsis-item cursor-pointer" slot="reference">
                                        <img style="width: 30px;height: 30px;" :style="{'margin-right':index!=scope.row.third_platform.length-1?'5px':''}"
                                            :src="'/assets/addons/shopro/img/user/'+i.provider+'-'+i.platform+'.png'">
                                    </div>
                                </el-popover>
                            </template>
                            <span v-else>-</span>
                        </div>
                    </template>
                </el-table-column>
                -->
                <el-table-column label="红包" prop="money" min-width="120">
                </el-table-column>
                <el-table-column label="积分" prop="score" min-width="120">
                </el-table-column>
                <el-table-column label="消费券" prop="getnum" min-width="120">
                </el-table-column>
                <el-table-column label="活动红包" prop="total_score" min-width="120">
                </el-table-column>
                <el-table-column label="加入时间" min-width="160">
                    <template slot-scope="scope">
                        <div>
                            {{moment(scope.row.logintime*1000).format("YYYY-MM-DD HH:mm:ss")}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" min-width="180">
                    <template slot-scope="scope">
                        <div>
                            {if condition = "$auth->check('shopro/user/user/profile')"}
                            <span class="edit-text" @click="operation('edit',scope.row.id)">查看详情</span>
                            {/if}
                            {if condition = "$auth->check('shopro/user/user/del')"}
                            <span class="del-text" @click="operation('del',scope.row.id)">删除</span>
                            {/if}
                            <!-- <span v-if="scope.row.status!='normal'" class="enable-text"
                                @click="operation('enable',scope.row.id)">启用</span>
                            <span v-if="scope.row.status!='hidden'" class="disable-text"
                                @click="operation('disable',scope.row.id)">禁用</span> -->
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page-container display-flex">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
            </el-pagination>
        </div>
    </div>
</div>